<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>课程列表</title>
    <link rel="stylesheet" href="CSSFile/BootStrapCSS/bootstrap.css">
    <link rel="stylesheet" href="CSSFile/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="CSSFile/CourseList.css">
    <link rel="stylesheet" href="CSSFile/navigation.css">
</head>
<body>
<!--导航栏-->
<ul class="nav black container-fluid">
    <li class="col-lg-1"><a target="_top" href="Home.html">Elearning</a></li>
    <li class="col-lg-1"><a target="_top" href="CourseList.html">浏览课程</a></li>
    <li class="col-lg-1"><a href="">浏览直播</a></li>
    <li class="col-lg-3">
        <form class="form-inline" action="Search.html" method="post" target="_top" name="nav-form"
              onsubmit="setSearchKey()">
            <input class="form-control" type="search" placeholder="搜索感兴趣的课程" required name="search-box">
            <button class="btn btn-success" type="submit"><i class="fa fa-search" aria-hidden="true">搜索</i></button>
        </form>
    <li class="col-lg-1"><a href="Message.html">消息<span class="badge"></span></a></li>
    <li class="col-lg-1"><a href=""><img id="userimg" alt="用户头像"></a></li>
</ul>
<!--/导航栏-->


<div class="be-center">
    <div class="course-nav-row">
        <span class="hd l">方向：</span>
        <div class="bd">
            <ul id="label1">
                <li class="course-nav-item on" id="all">
                    <a href="#">全部</a>
                </li>
                <li class="course-nav-item" id="front">
                    <a href="#">前端开发</a>
                </li>
                <li class="course-nav-item" id="backend">
                    <a href="#">后端开发</a>
                </li>
                <li class="course-nav-item" id="cutting">
                    <a href="#">前沿技术</a>
                </li>
                <li class="course-nav-item" id="database">
                    <a href="#">数据库</a>
                </li>
                <li class="course-nav-item" id="bigData">
                    <a href="#">云计算&大数据</a>
                </li>
                <li class="course-nav-item" id="operations">
                    <a href="#">运维&amp;测试</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="course-nav-row">
        <span class="hd l">分类：</span>
        <div class="bd">
            <ul id="label2">
            </ul>
        </div>
    </div>
    <div class="course-nav-row">
        <span class="hd l">难度：</span>
        <div class="bd">
            <ul id="label3">
                <li class="course-nav-item on">
                    <a href="#">全部</a>
                </li>
                <li class="course-nav-item ">
                    <a href="#">入门</a>
                </li>
                <li class="course-nav-item ">
                    <a href="#">初级</a>
                </li>
                <li class="course-nav-item ">
                    <a href="#">中级</a>
                </li>
                <li class="course-nav-item ">
                    <a href="#">高级</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="sort-bar">
    <ul id="sortOrd">
        <li class="course-nav-item on">
            <a href="#">热度降序</a>
        </li>
        <li class="course-nav-item">
            <a href="#">价格升序</a>
        </li>
        <li class="course-nav-item">
            <a href="#">价格降序</a>
        </li>
        <li class="course-nav-item">
            <a href="#">时间升序</a>
        </li>
        <li class="course-nav-item">
            <a href="#">时间降序</a>
        </li>
    </ul>
</div>

<div>
    <div class="row nice-block" id="course-content">
    </div>
</div>

<div class="page">
    <a href="#" id="first">首页</a>
    <a href="#" id="previous">上一页</a>
    <a href="#" id="next">下一页</a>
    <a href="#" id="last">尾页</a>
</div>

<script src="JSFile/jquery-3.4.1.js"></script>
<script src="JSFile/CourseList.js"></script>
<script src="JSFile/BootStrapJS/bootstrap.bundle.js"></script>
<script src="JSFile/navigation.js"></script>
</body>

</html>